/**
 * @description  : demo 示例
 * @descriptionDetail : 统计类表格示例
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:15:51
 */
<template>
  <view>
    <t-table-scroll
      :headers="headers"
      loaderSize="100%"
      :padding="[0, 0]"
      :sort-col="sortCol"
      :sort-ways="['asc', 'inv']"
      :bottom-computed-fixed="true"
      :computed-col="computedCol"
      :default-col-width="220"
      first-col-bg-color="#ecf5ff"
      :loadData="loadData"
      :top="0"
      @tapCell="handleClick"
    ></t-table-scroll>
  </view>
</template>
/*** 注：分页统计列表组件不支持横向滚动 */
<script>
import {TTableScroll,} from "@/components/t-table";
export default {
  components: {
    TTableScroll,
  },
  data() {
    return {
      loading: true,  // 列表加载提示
      headers: [{     // 标题列
        label: '单位',
        key: 'orgName',
      }, {
        label: '卷烟数',
        key: 'cigNum',
        width: 140,
      }, {
        label: '占比',
        key: 'zb',
        width: 120,
        negativeColor: '#fa3534',     // 负数颜色设置
        positiveColor: '#18b566',     // 正数颜色设置
      }, {
        label: '同比',
        key: 'tb',
        width: 120,
        negativeColor: '#fa3534',
      }, {
        label: '省内数',
        key: 'inNum',
      }, {
        label: '省外数',
        key: 'outNum',
      },
      ],
      sortCol: [    // 指定哪些列进行排序
        {
          key: 'orgName',
          isNumber: false,  // 是否是数字排序，如果不是，则按照拼音进行排序
        }, {
          key: 'cigNum',
          isNumber: true,
        }, {
          key: 'zb',
          isNumber: true,
        },
        {
          key: 'tb',
          isNumber: true,
        },
        {
          key: 'inNum',
          isNumber: true,
        },
        {
          key: 'outNum',
          isNumber: true,
        },
      ],
      computedCol: ['cigNum', 'inNum', 'outNum',],  // 统计指定列数据
      contents: [],
    }
  },
  created() {
    console.log(this.$u);
    console.log(this.$modal);
  },
  methods: {
    loadData(pager) {
      return new Promise(resolve => {
        let datas = [{
          orgName: '杭州市',
          cigNum: 6149.4,
          zb: 9.18,
          tb: -2.79,
          inNum: 1408.8,
          outNum: 1902.8,
        },{
          orgName: '宁波市',
          cigNum: 5149.4,
          zb: 19.18,
          tb: 12.79,
          inNum: 1608.8,
          outNum: 3902.8,
        },{
          orgName: '温州市',
          cigNum: 2149.4,
          zb: 19.18,
          tb: -27.79,
          inNum: 408.8,
          outNum: 902.8,
        },{
          orgName: '嘉兴市',
          cigNum: 949.4,
          zb: -9.18,
          tb: 2.79,
          inNum: 108.8,
          outNum: 192.8,
        },{
          orgName: '湖州市',
          cigNum: 8149.4,
          zb: 19.18,
          tb: -21.79,
          inNum: 1468.8,
          outNum: 1202.8,
        },];
        setTimeout(() => {
          resolve({
            page: 1,
            limit: 20,
            count: 50,
            data: [...datas,...datas, ...datas, ...datas,],
          });
        }, 1000);
      });
    },
    // 点击某一项进行进一步的操作
    handleClick({key, data,}) {
      console.log("点击", key, data);
      this.$u.toast("点击了" + data[key]);
    },
  },
}
</script>
<style lang="scss" scoped>
</style>